<template>
  <div class="wrap">
    <Operate @funcOperate="funcOperate" @updateList="updateList"></Operate>
    <List @funcOperate="funcOperate" v-if="listUpdate"></List>
    <Function :funcData="funcData" v-if="showFunctionForm" @closeFunModal="closeModal"></Function>
    <Detail :funcData="funcData" v-if="showViewForm" @closeFunModal="closeModal"></Detail>
    <Doc :docData="docData" v-if="showDocForm" @closeDocModal="closeModal"></Doc>
  </div>

</template>

<script setup>
import List from './components/list.vue'
import Operate from './components/operate.vue'
import Function from './components/modals/function.vue'
import Detail from './components/modals/detail.vue'
import Doc from './components/modals/doc.vue'
import Test from './components/modals/test.vue'
import {onMounted, reactive, ref} from "vue";
import { nextTick } from 'vue'
import {storage} from "../../utils/storage";
import {message, Modal} from "ant-design-vue";

onMounted(()=>{
  // getStorage()
})


/**
 * open the modal (function,doc,test,view)
 * @param data  params prop to the child components,looks like {type:'',record:''}
 */
let funcData = ref({}) // data for functions
let docData = ref({}) // data for functions
let showViewForm = ref(false) // whether show the modal for view detail
let showFunctionForm = ref(false) // whether show the modal for functions
let showDocForm = ref(false) // whether show the modal for doc
const funcOperate = (opt)=>{
  funcData.value = opt
  docData.value = opt
  switch (opt.type){
    case 'add': showFunctionForm.value = true;break;
    case 'view': showViewForm.value = true;break;
    case 'edit': showFunctionForm.value = true;break;
    case 'delete': showFunctionForm.value = true;break;
    case 'doc': showDocForm.value = true;break;
  }
}


/**
 * update the list
 */
const listUpdate = ref(true) // used for update list when data change
const updateList = ()=>{
  listUpdate.value = false
  nextTick(()=>{
    listUpdate.value = true
  })
}

/**
 * close the modal (function,doc,test,view)
 * @param update : whether the list need update or not
 */
const closeModal = (update)=>{
  showViewForm.value = false
  showFunctionForm.value = false
  showDocForm.value = false
  if(update){
    updateList()
  }
}
</script>

<style scoped>
.wrap{
  width: 60%;
  min-width: 1000px;
  margin: 0 auto;
  padding-top: 20px;
}
</style>
